<template>
  <div>
    <van-nav-bar
      title="入库列表"
      left-text="返回"
      right-text="筛选"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showapplie = true"
    />

    <el-table stripe show-summary :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="添加日期" width="180">
        <template v-slot="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            new Date(scope.row.saveDate)
              .toLocaleString('chinese', { hour12: false })
              .substring(5)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="仓库名称"
        width="90"
      ></el-table-column>
      <el-table-column
        prop="giftName"
        label="商品名称"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="录入数量"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="getNum"
        label="出库数量"
        width="100"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top-start"
            enterable
          >
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-delete-solid"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column></el-table-column>
    </el-table>

    <!-- 人物选择 -->
    <van-overlay :show="showapplie" @click="showapplie = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <van-cell title="选择日期区间" :value="date" @click="show = true" />
          <van-calendar
            v-model="show"
            type="range"
            :min-date="new Date(2020)"
            @confirm="onConfirm"
            :show-confirm="false"
          />
          <div class="footerbutton">
            <van-button round type="warning" @click="getBtn">确 认</van-button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Toast, Notify } from 'vant'
export default {
  data() {
    return {
      // 申请表格数据
      tableData: [],
      //   筛选
      querInfo: {},
      showapplie: false,
      date: '',
      show: false,
      showagg: false,
    }
  },
  created() {
    this.getgoods()
  },
  methods: {
    //   返回上一个页面
    onClickLeft() {
      this.$router.go(-1)
    },
    getBtn() {
      this.getgoods()
    },
    // 获取礼品
    async getgoods() {
      const { data: res } = await this.$http.post('hx/goods', this.querInfo)
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.tableData = res.data
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.querInfo.date = date
    },
  },
}
</script>

<style lang="less" scoped>
.block {
  position: relative;
  text-align: center;
  width: 200px;
  height: 100px;
  background-color: #fff;
  .footerbutton {
    position: absolute;
    bottom: 10px;
    .van-button {
      width: 80px;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>